<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>通航收银台</title>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/dialog.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script src="../js/flexible.js" type="text/javascript"></script>
    <script src="../js/swiper.min.js" type="text/javascript"></script>
    <script src="../js/zepto-v1.2.0.min.js" type="text/javascript"></script>
    <script src="../js/dialog.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="cashier-wrapper">
      <header class="header-wrapper clearfix">
        <div class="header-container white-background">
          <div class="left-container">
            <a class="back black-back" href="javascript:history.back(-1)"></a>
          </div>
          <span class="title">通航收银台</span>
          <div class="right-container">
            <a class="edit" href="orderCenter.html">订单中心</a>
          </div>
        </div>
      </header>
      <section class="cashier-container">
        <div class="amount-container">
          <span class="currency">¥</span>
          <span class="integer"></span><span class="decimal"></span>
        </div>
        <div class="payment-list">
          <div class="payment-item wepay">
            <span class="icon"></span>
            <span class="method">微信支付</span>
            <span class="checkbox checked"></span>
          </div>
          <div class="payment-item alipay">
            <span class="icon"></span>
            <span class="method">支付宝支付</span>
            <span class="checkbox"></span>
          </div>
          <div class="payment-item unionpay">
            <span class="icon"></span>
            <span class="method">银联支付</span>
            <span class="checkbox"></span>
          </div>
        </div>
        <div class="large-btn primary-btn">微信支付 <span class="summary">¥<span class="amount"></span></div>
      </section>
    </div>
  </body>
  <script>
    $(document).ready(function () {
      const url_string = window.location.href
      const url = new URL(url_string)
      const summary = url.searchParams.get('summary')
      $('.amount').html(summary)
      const integer = Math.trunc(summary)
      const decimal = String((summary % 1).toFixed(2)).slice(1)
      $('.integer').html(integer)
      $('.decimal').html(decimal)
      $('.checkbox').click(function() {
        if (!$(this).hasClass('checked')) {
          $(this).addClass('checked')
          $(this).parent('.payment-item ').siblings().children('.checkbox').removeClass('checked')
        }
      })
    })
  </script>
</html>
